{% extends "base.html" %}

{% block subtitle %}
  Dashboard
{% endblock subtitle %}

{% block content %}
  <div class="container" ng-controller="Dashboard">
    <div class="row">
      <div class="col-lg-8 col-md-8 col-sm-8">
        <div class="oppia-main-content">
          <h3 class="oppia-page-title">
            Dashboard
          </h3>

          <div class="container">
            <div class="row">
              <div class="col-lg-8 col-md-8 col-sm-8">
                <h4>Most recent updates to explorations and threads</h4>
                <div>
                  <span class="pull-right" ng-if="jobQueuedMsec" style="opacity: 0.7; font-size: smaller;">
                    Last updated: <[getLocaleAbbreviatedDatetimeString(jobQueuedMsec)]>
                  </span>
                  <!-- This seems to be needed because otherwise, in Firefox, the 'last updated' string gets merged into the table of recent updates. -->
                  <br>
                </div>

                <div ng-if="recentUpdates.length === 0">
                  <em>No recent updates.</em>
                </div>

                <div ng-if="recentUpdates.length > 0">
                  <table class="table">
                    <tr>
                      <th></th>
                      <th></th>
                      <th>Exploration</th>
                      <th>Last updated</th>
                      <th>by</th>
                      <th>Subject</th>
                    </tr>
                    <tr ng-repeat="update in recentUpdates" ng-class="{'oppia-dashboard-row-recent': lastSeenMsec && lastSeenMsec < update.last_updated_ms && update.author_username !== currentUsername, 'oppia-dashboard-row': !lastSeenMsec || lastSeenMsec >= update.last_updated_ms || update.author_username === currentUsername}" ng-click="navigateToItem(update.activity_id, update.type)">
                      <td>
                        <span class="label label-primary" ng-if="lastSeenMsec && lastSeenMsec < update.last_updated_ms && update.author_username !== currentUsername">
                          New
                        </span>
                      </td>
                      <td>
                        <span ng-if="update.type === 'exploration_commit'"
                              class="glyphicon glyphicon-flag"
                              title="Exploration commit"></span>
                        <span ng-if="update.type === 'feedback_thread'"
                              class="glyphicon glyphicon-comment"
                              title="Feedback thread"></span>
                      </td>
                      <td><[update.activity_title]></td>
                      <td><[getLocaleAbbreviatedDatetimeString(update.last_updated_ms)]></td>
                      <td><[update.author_username]></td>
                      <td><[update.subject]></td>
                    </tr>
                  </table>
                </div>
              </div>

              <div class="col-lg-4 col-md-4 col-sm-4">
                <div>
                  <a class="btn btn-success" ng-click="showCreateExplorationModal()">
                    Create New Exploration
                  </a>
                </div>

                <div ng-if="!isEmpty(privateExplorationIds)">
                  <hr>
                  <h4>Private explorations</h4>
                    <ul>
                      <li ng-repeat="expId in privateExplorationIds">
                        <a ng-href="/create/<[expId]>"><[explorations[expId].title]></a>
                      </li>
                    </ul>
                  </h4>
                </div>

                <div ng-if="!isEmpty(publicExplorationIds)">
                  <hr>
                  <h4>Public explorations</h4>
                  <ul>
                    <li ng-repeat="expId in publicExplorationIds">
                      <a ng-href="/create/<[expId]>"><[explorations[expId].title]></a>
                    </li>
                  </ul>
                </div>

                <div ng-if="!isEmpty(featuredExplorationIds)">
                  <hr>
                  <h4>Featured explorations</h4>
                  <ul>
                    <li ng-repeat="expId in featuredExplorationIds">
                      <a ng-href="/create/<[expId]>"><[explorations[expId].title]></a>
                    </li>
                  </ul>
                </div>

                <div ng-if="isEmpty(privateExplorationIds) && isEmpty(publicExplorationIds) && isEmpty(featuredExplorationIds)">
                  <p>
                    <em>You currently aren't managing or collaborating on any explorations.</em>
                  </p>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    {% include 'components/exploration_creation_button.html' %}
  </div>
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('components/explorationCreationButton.js') }}
    {{ include_js_file('/dashboard/Dashboard.js') }}
  </script>
{% endblock footer_js %}
